<template>
  <div class="main">
    <view class="box left" @click.stop="minus" :style="minusStyle">
      <view class="icon">
        <uv-icon name="minus" size="28rpx" :color="proxy.$config.mainColor"></uv-icon>
      </view>
    </view>
    <!-- <u-image width="36rpx" height="36rpx" src="//oss.seenlove.com/images/18d0b14a7ba9477f59410048a8f1f9eb.png" @click="minus"></u-image> -->
    <view class="numberBox">{{number}}</view>
    <view class="box" :style="{background:proxy.$config.mainColor}" @click.stop="plus">
      <view class="icon">
        <uv-icon name="plus" size="28rpx" color="#ffffff"></uv-icon>
      </view>
    </view>
    <!-- <u-image width="36rpx" height="36rpx" src="//oss.seenlove.com/images/c245fa39d22133654149ab1f87e0d91a.png" @click="plus"></u-image> -->
  </div>
</template>

<script setup lang="ts">
import { ref, watch, defineProps, defineEmits, computed } from "vue";
const { proxy } = getCurrentInstance();
let number = ref(0);
let props = defineProps(["modelValue", "max", "min"]);
let emits = defineEmits(["plus", "minus", "update:modelValue", "change"]);
let minusStyle = ref({
  borderColor: proxy.$config.mainColor,
});

const changeVal = (e) => {
  number.value = e;
  emits("update:modelValue", e);
};
function plus() {
  number.value++;
  emits("plus", number.value);
}

function minus() {
  if (number.value > min.value) {
    number.value--;
  } else {
    number.value = min.value;
  }
  emits("minus", number.value);
}

const min = computed(() => {
  return props.maxValue ? props.maxValue : 0;
});

watch(
  () => number.value,
  (newValue, oldValue) => {
    if (newValue || newValue == 0) {
      changeVal(newValue);
    }
  },
  { deep: true, immediate: true }
);

watch(
  () => props.modelValue,
  (newValue, oldValue) => {
    if (newValue || newValue == 0) {
      changeVal(newValue);
    }
  },
  { deep: true, immediate: true }
);
</script>

<style lang="scss" scoped>
.main {
  display: flex;
  align-items: center;
  .numberBox {
    margin: 0 10px;
  }
  .left {
    border: 1.3px solid #01803d;
  }
  .box {
    width: 20px;
    height: 20px;
    position: relative;
    border-radius: 50%;
    overflow: hidden;
    .icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
</style>